<template>
   <div class="scroll-box"
        v-if="scrollToDisplay"
        @click="_srcollTo"
   >
      <i class="el-icon-caret-top"></i>
   </div>
</template>

<script>
   export default {
      name: "srcollTo_box",
      data() {
         return {
            scrollToDisplay: false,
            distance: 0,
            time: null,
            distanceNumber: 0
         }
      },
      mounted() {
         window.addEventListener('scroll', (e) => {
            this.distance = document.documentElement.scrollTop
            if (this.distance >= 500) this.scrollToDisplay = true
            else this.scrollToDisplay = false
         })
      },
      methods: {
         _srcollTo() {
            this.srcollTo()
         },
         srcollTo() {
            if (this.distance <= 0) {
               return
            }
            requestAnimationFrame(() => {
               window.scrollTo(0, this.distance -=290)
               this.srcollTo()
            })
         }
      }
   }
</script>

<style scoped lang="stylus">
   .scroll-box
      i
         font-size 30px
         color white
      display flex
      justify-content center
      align-items center
      cursor pointer
      bottom 100px
      right 10px
      width 40px
      height 40px
      background #cbcbcb
      z-index 9999
      position fixed
</style>
